<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="">
			<input type="file" onchange="getFileContent()" name="myfile" id="myfile"/>
			<br />
			<img src="" alt="" id="img"/>
			<input type="submit" />
			
		</form>
		<script>
			function getFileContent(){
				/* 
				1.创建文件读取对象
				var reader=new FileReader()
				2.读取文件，获取dataurl
				 */
				var reader=new FileReader();
				var file = document.querySelector("#myfile").files[0]
				/* readAsDataURL()需要二进制文件，无返回值 
					文件存放在reader对象的result中
					读取文件需要时间
					所以需要监听
					onabort() 读取文件中断时执行
					onerror() 读取错误时触发
					onload()  读取成功完成触发
					onloadend() 开始读取时执行
					onprogress()读取文件过程中持续触发
					
				*/
				reader.readAsDataURL(file)
				reader.onload=function(){
					document.querySelector("#img").src=reader.result;
				}
			}
			
		</script>
		<!-- 
			FileReader:读取文件的内容
			1.readAsText() 读取文本文件
			2.readAsBinaryString()：读取任意类型的文件
			返回二进制数据
			3.readAsDataURL():读取文件获取一段以data开头的字符串
			4.abort():中断读取
		 -->
		 
	</body>
</html>